<template>
	<view id="form-box" class="form-box">

		<view>
			<view class="input-box">
				<image mode="heightFix" class="mobile-icon" :src="rootImagePath +'mobile-icon.png'" style="pointer-events: none"></image>
			
				<input class="input" type="number" ref="input" maxlength="11" @input="inputPhone" v-model="formData.phone"
					placeholder="请输入手机号" placeholder-style="
font-size: 40rpx;
color: #2A2A2A;
">
			</view>
	<view class="" style="font-size: 26rpx;padding-left: 97rpx;color: #E52654;">
			*该活动每个手机号仅能参加一次
		</view>
		</view>
	
		<view class="submit" @click="submitMethod"> 
		<!-- @click="submitMethod" -->
			<image class="submit-btn" mode="widthFix" :src="rootImagePath +'btn.png'" style="pointer-events: none" ></image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#10031f" style="transform : scale(0.7)" />
				<text class="clauze-txt">
					<text class="text" @click="agreementChange">
						我已阅读并同意
					</text>
					<text class="tip-color" @click.stop="showAgreementHandler(1)">《隐私保护指引》</text>
						<text class="tip-color" @click="xieyi">《会员服务协议》</text>
					<text class="tip-color" @click.stop="showAgreementHandler(3)">《产品说明》</text>
				
				
				</text>
			</checkbox-group>
		

		</view>


	</view>
	<agreement-tcq v-if="isShowAgreement" :rootImagePath="rootImagePath" :agreementType="agreementType"
		@ok="agreementOkHandler"></agreement-tcq>
	<agreement-confirm-49 v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
		@cancel="isShowAgreementConfirm = false"
		@showAgreement="agreementConfirmShowAgreementHandler"></agreement-confirm-49>
	<sms-confirm v-if="isShowSmsConfirm" :mobile="formData.phone" @success="smsConfirmSuccess"
		@cancel="isShowSmsConfirm = false"></sms-confirm>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import validParamsUtil from "@/utils/validParamsUtil";
	import messageUtil from "@/utils/messageUtil.js"
	import smsApi from "@/apis/smsApi";
	import countDownUtil from "@/utils/countDownUtil.js"
	import httpUtil from "../../utils/httpUtil";
	import userApi from "../../apis/userApi";
	import openNewH5Util from "@/utils/openNewH5Util.js"
	import deviceUtil from "../../utils/deviceUtil";
	import paramApi from "@/apis/paramApi";
	import zfbUrlUtil from "@/utils/zfbUrlUtil.js"

	// import userApi from "@/api/userApi.js"

	// import {
	// 	Form
	// } from "ant-design-vue";

	const formData = ref({
		username: '',
		phone: '',
		code: '',
		isAgreement: false,
	});

	const isShowSmsConfirm = ref(false)

	const smsConfirmSuccess = (code) => {
		if (!code || code.length == 0) {
			messageUtil.showFail('验证码不能为空')
			return;
		}
		formData.value.code = code
		submitMethod();
	}


	const isShowOpenNewBrowser = computed(() => {

		if (!formData.value.isAgreement || formData.value.phone.length < 11) {
			return false;
		}
		if (deviceUtil.isIOS) {
			return true;
		}
		return false;
	})

const xieyi = () => {
		window.location.href = 'https://web.78keji.cn/xieyi/#/'
	}
	const isShowAgreementConfirm = ref(false)

	const agreementConfirmOkHandler = () => {
		formData.value.isAgreement = true
		submitMethod()
	}

	const agreementConfirmShowAgreementHandler = (value) => {
		showAgreementHandler(value)
	}

	const isShowAgreement = ref(false)
	const agreementType = ref(1) // 1-订购须知,2-隐私政策

	const sendCodeDownNumber = ref(0);
	const sendCodeText = ref('获取验证码')


	const props = defineProps(['param', 'autoSubmit', 'mobile', 'rootImagePath'])

	onMounted(() => {
		if (formData.value.phone == '' && props.mobile) {
			formData.value.phone = props.mobile
		}
		if (props.autoSubmit == 1) {
			formData.value.isAgreement = true
			setTimeout(() => {
				submitMethod()
			}, 500)
		}
		initShowTimeMethod()
	
	})

	const isNeedCodeValid = ref(true)
	const initH5IsCodeValid = () => {
		let params = {
			a: httpUtil.getA()
		}
		httpUtil.post('/api/alipayad/status', params, res => {
			if (res.data.pro_w && parseInt(res.data.pro_w) > 0) {
				isNeedCodeValid.value = false
			}
		})
	}

	const agreementChange = (e) => {
		formData.value.isAgreement = !formData.value.isAgreement;
	}

	const showAgreementHandler = (value) => {
		isShowAgreement.value = true;
		agreementType.value = value;
	}

	const gotoWebUrl = (pagePath) => {
		window.location.href = pagePath
	}

	const agreementOkHandler = () => {
		isShowAgreement.value = false;

	}

	const sendCodeHandler = () => {
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号不正确');
			return;
		}
		if (!countDownUtil.valid(sendCodeDownNumber.value)) {
			return;
		}

		smsApi.sendPaySms(formData.value.phone, res => {
			messageUtil.showSuccess('短信发送成功')

			sendCodeDownNumber.value = 60;
			countDownUtil.start(sendCodeDownNumber.value, res => {
				sendCodeDownNumber.value = res;
				if (res <= 0) {
					sendCodeText.value = '获取验证码';
				} else {
					sendCodeText.value = res;
				}
			})

		}, err => {

		})
	}

	const submitMethod = () => {
			console.log(111)
		 uni.hideKeyboard()
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号格式不正确')
			return;
		}
		// formData.value.isAgreement = true;
		if (!formData.value.isAgreement) {
			// messageUtil.showFail('请先同意并阅读相关条款')
			console.log('submitMethod2')
			isShowAgreementConfirm.value = true
			return;
		}



		if (deviceUtil.isWeChatBrowser() && deviceUtil.isAndroid) {

		let params = {
	pro: 'alipay_new_sign_yk002',
	a: httpUtil.getA(),
	mobile: formData.value.phone,
		proCode:'LH2527',
		uuid:uni.getStorageSync('uuid')
		}
		
		if (deviceUtil.isWeChatBrowser()) {
			params.env = 2
		} else if (deviceUtil.isAliBrowser()) {
			params.env = 1
		} else {
			params.env = 3
		}
		
		if (paramApi.getParam()) {
			params.param = paramApi.getParam()
		}
		
		if (userApi.getUserId()) {
			params.openid = userApi.getUserId()
		}
		
		if (formData.value.code) {
			params.captcha = formData.value.code
			formData.value.code = ''
		}
		
		
		httpUtil.post('/api/youku/subOrder', params, res => {
			
			
			messageUtil.closeLoading()
		// alert(res.data.url)
		if(res.code==1){
			let url = 'http://sign.syhy123.com/api/Clhk/extParam?url='+encodeURIComponent(res.data.url)
			
			window.location.href = url
		}else{
			// let url='https://kshk.91bak.com/zhiboclb/46/#/pages/llg/103690?a='+httpUtil.getA()+'&mobile='+formData.value.phone
			// window.location.href = url
		}
		
		
		},err=>{
			// let url='https://kshk.91bak.com/zhiboclb/46/#/pages/llg/103690?a='+httpUtil.getA()+'&mobile='+formData.value.phone
			// window.location.href = url
		
		})
		

		} else if (!deviceUtil.isWeChatBrowser() && !deviceUtil.isAliBrowser() && !userApi.getUserId() && formData
			.value.code.length == 0 && isNeedCodeValid.value) {
			
			messageUtil.showLoading()
			smsApi.sendPaySms(formData.value.phone, res => {
				messageUtil.closeLoading()
				messageUtil.showSuccess('验证码发送成功')
				isShowSmsConfirm.value = true
			})
		} else {
			// validCode()
			submitOrder()
		}


		// 倒计时确认页
		// uni.navigateTo({
		// 	url: '/pages/orderConfirm/orderConfirm?mobile=' + formData.value.phone
		// })
	}

	const validCode = () => {
		let params = {
			mobile: formData.value.phone,
			captcha: formData.value.code,
			type: 3,
		}
		httpUtil.post('/api/tongliansign/checkSms', params, res => {
			submitOrder()
		})
	}

	const submitOrder = () => {
		messageUtil.showLoading()


		// let params = {
		// 	pro: 'alipay_new_sign_yk001',
		// 	env: 3,
		// 	a: httpUtil.getA(),
		// 	mobile: this.formData.mobile,
		// 	openid: userApi.getUserId(),
		// }
		// if (userApi.getParam()) {
		// 	params.param = userApi.getParam()
		// }

		// pro 参数说明
		// 0.1元3天会员版本：
		// （支付0.1元）支付宝1张5元立减金: alipay_new_sign_yk001

		// 开通29.9元会员版本：
		// （支付29.9元）支付宝6张5元立减金: alipay_renew_yk001

		// env 参数说明 1-支付宝h5，2-微信h5 3-浏览器h5，4-支付宝小程序

		let params = {
			pro: 'alipay_new_sign_yk002',
			a: httpUtil.getA(),
			mobile: formData.value.phone,
				proCode:'LH2527',
				uuid:uni.getStorageSync('uuid')
		}

		if (deviceUtil.isWeChatBrowser()) {
			params.env = 2
		} else if (deviceUtil.isAliBrowser()) {
			params.env = 1
		} else {
			params.env = 3
		}

		if (paramApi.getParam()) {
			params.param = paramApi.getParam()
		}

		if (userApi.getUserId()) {
			params.openid = userApi.getUserId()
		}

		if (formData.value.code) {
			params.captcha = formData.value.code
			formData.value.code = ''
		}

		httpUtil.post('/api/youku/subOrder', params, res => {
			messageUtil.closeLoading()
		
			if(res.code==1){
			let url = zfbUrlUtil.wrapUrl(res.data.url)
			window.location.href = url
			}else{
				// let url='https://kshk.91bak.com/zhiboclb/46/#/pages/llg/103690?a='+httpUtil.getA()+'&mobile='+formData.value.phone
				// window.location.href = url
			}

		},err=>{
			// let url='https://kshk.91bak.com/zhiboclb/46/#/pages/llg/103690?a='+httpUtil.getA()+'&mobile='+formData.value.phone
			// window.location.href = url
		
		})

	}

	// const openurl = (url) => {
	// 	var a = document.createElement('a');
	// 	a.setAttribute('href', url);
	// 	a.setAttribute('style', 'display:none');
	// 	a.setAttribute('target', '_blank');
	// 	document.body.appendChild(a);
	// 	a.click();
	// 	a.parentNode.removeChild(a);
	// }


	const inputPhone = () => {
		if (formData.value.phone.length == 11) {
			
		initH5IsCodeValid()
		setTimeout(() => { submitMethod()}, 500);
		
			
		}
	}

	const timeData = ref({
		lastTime: 0,
		hour: 23,
		minute: 59,
		second: 59,
	});

	const initShowTimeMethod = () => {
		let lastTime = new Date();
		lastTime.setHours(23);
		lastTime.setMinutes(59);
		lastTime.setSeconds(59);
		timeData.value.lastTime = lastTime.getTime();
		setInterval(() => {
			showTimeMethod();
		}, 1000);
	}

	const showTimeMethod = () => {
		var time_now = new Date(); // 获取当前时间
		time_now = time_now.getTime();
		var time_distance = timeData.value.lastTime - time_now; // 结束时间减去当前时间
		var int_day, int_hour, int_minute, int_second;
		if (time_distance >= 0) {
			// 天时分秒换算
			int_day = Math.floor(time_distance / 86400000)
			time_distance -= int_day * 86400000;
			int_hour = Math.floor(time_distance / 3600000)
			time_distance -= int_hour * 3600000;
			int_minute = Math.floor(time_distance / 60000)
			time_distance -= int_minute * 60000;
			int_second = Math.floor(time_distance / 1000)

			// 时分秒为单数时、前面加零站位
			if (int_hour < 10)
				int_hour = "0" + int_hour;
			if (int_minute < 10)
				int_minute = "0" + int_minute;
			if (int_second < 10)
				int_second = "0" + int_second;

			// 显示时间
			// time_d.innerHTML = int_day;
			timeData.value.hour = int_hour;
			timeData.value.minute = int_minute;
			timeData.value.second = int_second;
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.form-box {
		// top: 91vw;
		// position: absolute;
		width: 100%;
		padding: 10rpx 0 0 0;
		// background-color: #edf3ff;
		// >view {
		// 	padding: 1.5rem 0 0.8rem;
		// 	background-size: 100% 100%;
		// }

	}

	.roll-left-mobile-box {
		margin-bottom: 24rpx;
	}

	.roll-up-mobile-box {
		width: 94%;
		margin: 0 auto;
	}

	.count-down-time-box {
		width: 94%;
		margin: 32rpx auto;
	}

	.input-box {
		width: 90%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2px solid #FF6A00;

		background-color: #ffffff;
		border-radius: 52rpx;


		.mobile-icon {
			height: 60rpx;
			width: auto;
			margin-left: 20rpx;
		}

		.split {
			width: 1px;
			height: 21px;
			border-right: 1px solid rgb(180, 180, 180);
			margin-left: 3px;
		}

		text {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #26265F;
			margin-left: 36rpx;
		}

		.input {
			flex-grow: 1;
			height: 100rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 32rpx;
			letter-spacing: 3rpx;
			font-weight: 500;
			color: #202E42;
			// padding-left: 80rpx;
			margin-left: 24rpx;

			&::-webkit-input-placeholder,
			&::-ms-input-placeholder {
				color: #202E42;
				font-size: 32rpx;
			}

			&::-webkit-input-placeholder {
				color: #202E42;
				font-size: 32rpx;
			}

			&::-moz-placeholder {
				color: #202E42;
				font-size: 32rpx;
			}

		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #6991E9;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #FFFFFF;
			margin-right: 20rpx;
		}
	}

	.clauze {
		width: 540rpx;
		font-size: 24rpx;
		margin: 10rpx auto 0;
		text-align: center;
		font-family: SourceHanSansSC-Light;
		display: flex;
		justify-content: center;
		align-items: center;

		.clauze-txt {
			line-height: 30rpx;
		}

		.uni-checkbox-input {
			border-radius: 100%;
			background-color: none;
		}

		.uni-checkbox-wrapper {
			width: 22rpx;
			height: 22rpx;
		}

		.text {
			font-size: 20rpx;
			color: #323232;
		
		}

		.tip-color {
			color:#FF6A00;
			font-size: 20rpx;
			font-weight: 600;
		}


	}

	.foot-tip-text {
		width: 90%;
		font-size: 24rpx;
		text-align: center;
		font-family: SourceHanSansSC-Light;
	
		margin: 10rpx auto 0;

		.link {
			font-size: 24rpx;
			text-align: center;
			font-family: SourceHanSansSC-Light;
			letter-spacing: 2rpx;
			color: #fff;
		}
	}

	// ::v-deep(.van-checkbox__text) {
	// 	color: #FFFFFF;
	// 	font-size: .8rem;
	// }

	.submit {
		width: 660rpx;
		margin: 35rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			width: 100%;
			height: auto;
			animation: butChange 1s infinite;
		}
	}
</style>